<template>
  <div class="pr ">
    <div id="navleft"></div>
    <div class="shape-wrap">
      <div class="b-shape-1">
        <img src="/imgs/shape-1.png" alt="">
      </div>
      <div class="b-shape-2">
        <img src="/imgs/shape-2.png" alt="">
      </div>
      <div class="b-shape-3">
        <img src="/imgs/shape-3.png" alt="">
      </div>
      <div class="b-shape-4">
        <img src="/imgs/shape-4.png" alt="">
      </div>
    </div>
    <div id="nav">
      <div class="app_router" style="flex: 1 1 0%;">
        <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
          <div class="home app_router" style="flex: 1 1 0%;">
            <div class="loginView mainContent">
              <div class="login_title_content"></div>
              <div class="loginTitle center">
                <div class="loginActive">微信登录</div>
                <div class="split"></div>
                <div class=""><nuxt-link :to="'/loginpwd?from='+(route.query.from?route.query.from:'/')">密码登录</nuxt-link></div>
              </div>
              <div>
                <div class="qrcode pr" id="login_container">
                  <a href="javascript:void(0);" class="refresh-link" title="点击刷新" @click.prevent="handleChangeState"><svg t="1705789469450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5054" width="20" height="20"><path d="M379.392 870.4c-92.672-44.828-171.918-143.19-198.03-245.76-24.576-96.484-6.258-200.932 50.517-288.54 48.81-75.208 117.191-125.896 217.316-161.11 24.69-8.704 44.942-18.375 44.942-21.56 0-3.13-10.923-16.612-24.292-29.924-27.306-27.193-29.582-36.921-12.401-54.272 19.91-20.139 36.58-16.327 71.68 16.327 16.839 15.644 46.592 41.301 66.104 57.003 38.23 30.72 47.616 44.6 42.895 63.601-2.674 10.468-57.856 82.774-98.816 129.48-19.229 21.902-32.086 27.59-46.82 20.82a44.373 44.373 0 0 1-17.75-16.497c-7.11-13.54-0.682-27.762 28.787-63.374 10.808-13.085 19.74-25.6 19.74-27.705 0-7.794-25.657-10.013-54.955-4.722-51.257 9.216-96.825 34.987-141.994 80.213-22.528 22.585-45.227 50.745-52.167 64.683-48.925 98.361-46.536 211.797 6.371 302.763 24.462 41.927 81.237 95.858 122.937 116.622 96.825 48.242 204.345 45.397 294.684-7.737C806.4 737.166 867.556 601.26 842.183 480.825c-8.704-41.529-34.36-98.247-59.278-131.3-22.699-30.037-28.274-43.235-24.633-58.026 3.925-15.759 26.34-24.406 42.382-16.27 28.445 14.279 82.375 99.669 99.84 157.98 13.938 46.364 12.686 155.079-2.275 203.947-13.085 42.666-46.251 108.373-69.632 138.069-24.178 30.72-78.507 75.207-116.054 95.232-59.164 31.403-143.417 46.08-213.56 37.205-46.308-5.86-70.145-13.312-119.581-37.262z" p-id="5055"></path></svg></a>
                  <k-wx-login
                      :key="stateRef"
                      appid="wx26e1928e2b3d8260"
                      :state="stateRef"
                      href="https://study512.oss-cn-shenzhen.aliyuncs.com/weixin-login.css"
                      :redirect_uri="platformSystem.domain+'/api/login/weixin/login?systemid='+systemId+'_0'"></k-wx-login>
                </div>
                <p class="text-center c9999">通过微信扫一扫即可登录</p>
              </div>
              <div class="thirdLogin center mt40">
                <span class="des-span">登录或注册即同意
                  <a target="_blank" href="/page/yinsi.html">《隐私政策》</a>与
                  <a target="_blank" href="/page/userxieyi.html">《用户服务协议》</a>
                </span>
              </div>
              <div class="mt-5 text-center hidden">
                <nuxt-link class="chakra-link css-lro7a1 fz12 c9999" :to="'/register?from='+(route.query.from?route.query.from:'/')">还没有账号，前往注册 &gt;</nuxt-link>
              </div>
              <div class="mt-5 text-center">
                <a class="chakra-link css-lro7a1 green fz12" href="/"><span class="pr ftp2">👉</span> 开启我的学习之旅 &gt;</a>
              </div>
            </div>
            <div class="wx_code_box" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
useHead({title: '微信登录'})
import {defaultDomain, getSystemId} from "@/config/common.js"
const route = useRoute()
var loginStore = useStore.loginState()
var show = computed(()=>loginStore.loginFlag)
const stateRef = ref(new Date().getTime())
const systemId = ref(getSystemId)
var logintimer = null
var periodtimer = null
const persionnum = ref(1800)

const handleChangeState = () =>{
  stateRef.value = new Date().getTime()
  useLoading().finish()
  persionnum.value = 1800
  if(periodtimer)clearInterval(periodtimer)
  if(logintimer)clearInterval(logintimer)
  periodtimer = setInterval(handleListenerPeriod,1000)
  logintimer = setInterval(handleListenerWXLoginCallback,3000)
}


// 监听支付轮询回调的方法
const handleListenerWXLoginCallback = async ()=>{
    useLoading().start()
    const resp = await useWexinLoginCallbackApi(stateRef.value,0)
    if(logintimer)clearInterval(logintimer)
    if(periodtimer)clearInterval(periodtimer)
    // 2：获取登录路由参数，是否存在from.如果存在登录以后就跳转到from指定的地址
    // 写入token到cookie中
    useCache("TOKEN").setCache(resp.data.uuid)
    // 把用户信息存放于pinia状态管理
    const userStore = useStore.userState()
    userStore.setLoginUserInfo({...resp.data})
    // 放入到缓存中
    useLoading().finish()
    useMessage().success("登录成功！欢迎回到学习512大家庭，继续学习!")
    // 登录成功返回首页
    navigateTo(route.query.from || "/", {replace: true})
}

// 轮询过期二维码刷新的问题
const handleListenerPeriod = ()=>{
  persionnum.value --
  if(persionnum.value<=0) {
    persionnum.value = 1800
    handleChangeState()
  }
}

onMounted(()=>{
  if(logintimer)clearInterval(logintimer)
  if(periodtimer)clearInterval(periodtimer)
  periodtimer = setInterval(handleListenerPeriod,1000)
  logintimer = setInterval(handleListenerWXLoginCallback,3000)
})


onUnmounted(()=>{
  if(logintimer)clearInterval(logintimer)
  if(periodtimer)clearInterval(periodtimer)
  // 放入到缓存中
  useLoading().finish()
})


definePageMeta({
  layout: "login",
  middleware: ["md-repeat-login"]
})

</script>
<style scoped>


@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }

  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
  }

  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
  }

  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
  }

  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }
}

@-webkit-keyframes animationFramesTwo {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1);
  }

  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg) scale(0.9);
  }

  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg) scale(1);
  }

  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg) scale(1.2);
  }

  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg) scale(1.1);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
}

@keyframes animationFramesThree {
  0% {
    transform: translate(165px, -179px);
  }

  100% {
    transform: translate(-346px, 617px);
  }
}

@keyframes waveBtn {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .3)
  }
  50% {
    box-shadow: 0 0 0 40px transparent
  }
  100% {
    box-shadow: 0 0 0 0 transparent
  }
}

.app_router {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center
}

html {
  font-size: 100px
}

#navleft {
  position: absolute;
  left: 0;
  bottom: 215px;
  width: 100%;
  height: 100%;
  background: url(/imgs/left-shape.png) no-repeat left bottom;
}

#nav {
  background-image: url("/imgs/banner.png");
  background-size: cover;
  background-position: 467px;
  background-repeat: repeat-y;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center
}

.loginTitle {
  color: #2f2e3f;
  font-size: 32px;
  font-weight: 500
}

.loginTitle .split {
  margin: 0 16px
}

.loginTitle .loginActive {
  color: #2f2e3f
}

.margin-bottom-32 {
  margin-bottom: 25px
}

.open_wx_btn {
  background: #fff !important;
  color: #2f2e3f !important;
  border: 1px solid #e3e5e8;
  margin-top: 44px !important
}

.open_wx_btn.login-btn {
  border: initial !important
}

.open_wx_btn.login-btn:active, .open_wx_btn.login-btn:hover {
  background: initial !important
}

.open_wx_btn .svg-icon {
  cursor: pointer
}

.open_wx_btn .ic-wechat {
  margin: 0 22px
}

.open_wx_btn:hover {
  background: #f6f6f7 !important
}

.open_wx_btn:active {
  background: #edeeee !important
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
  -webkit-appearance: none
}

input[type=number] {
  -moz-appearance: textfield
}

.mainContent {
  width: 295px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center
}

.loginButton {
  width: 320px;
  height: 56px;
  background: #2878ff;
  border-radius: 32px;
  margin-top: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer
}

.loginButton:hover {
  background: #3d85ff
}

.loginButton:active {
  background: #246ce6
}

.thirdLogin {
  margin-top: 32px;
  position: relative
}

.thirdLogin .line {
  height: 1px;
  background: #f1f2f4;
  width: 320px;
  position: absolute
}

.thirdLogin .text {
  width: 98px;
  height: 100%;
  font-weight: 500;
  font-size: 14px;
  color: rgba(47, 46, 63, .45);
  background: #fff;
  z-index: 1
}

.phoneView {
  width: 320px;
  background: #fff;
  border: 1px solid #e3e5e8;
  box-sizing: border-box;
  border-radius: 8px;
  height: 44px;
  padding: 11px 12px;
  display: flex
}

.phoneView::-moz-placeholder {
  font-size: 14px;
  color: rgba(47, 46, 63, .45);
  opacity: 1
}

.phoneView::placeholder {
  font-size: 14px;
  color: rgba(47, 46, 63, .45);
  opacity: 1
}

.phoneView:focus {
  background: rgba(40, 120, 255, .1) !important;
  border: 1px solid #2878ff !important;
  outline: none
}

.lanhuText .lanhuParent span {
  font-size: 14px
}

.inputView {
  overflow: hidden;
  position: relative
}

@-webkit-keyframes dialogFrame {
  0% {
    bottom: 0
  }
  to {
    bottom: 40px
  }
}

@keyframes dialogFrame {
  0% {
    bottom: 0
  }
  to {
    bottom: 40px
  }
}

.login_title_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.dd-qr-code .self-defined-dd iframe {
  border-radius: 12px
}

.dd-grey-toolbar .toolbar-content svg {
  margin-right: 9px
}

.dd-grey-toolbar .toolbar-content p {
  font-size: 14px;
  line-height: 14px;
  padding-top: 1px;
  font-weight: 400;
  letter-spacing: 0;
  color: #2f2e3f
}

.wx_login_registry .wx_code .wx_account_code img {
  width: 100%;
  height: 100%;
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #f1f2f4
}

.home {
  display: flex;
  justify-content: center
}

.home .mainContent {
  width: 595px
}

.home .loginView input:-webkit-autofill {
  box-shadow: inset 0 0 0 1000px #fff !important
}

.home .loginView .passView {
  position: relative
}

.home .loginView .passView .check {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer
}

.home .loginView .loginTitle {
  font-size: 24px;
  font-weight: 500;
  color: rgba(47, 46, 63, .45);
  cursor: pointer;
  margin-bottom: 64px
}

.home .loginView .loginTitle .split {
  margin: 0 16px;
  width: 3px;
  height: 28px;
  position: relative;
  top: 2px;
  background: #e3e5e8
}

.home .loginView .loginTitle .loginActive {
  color: #2f2e3f;
  font-weight: bold;
}

.home .wx_code_box {
  position: absolute;
  background: #fff;
  top: 25%;
  left: 50%;
  text-align: center;
  width: 405px;
  height: 560px;
  margin-left: -202px;
  box-sizing: border-box;
  z-index: 3
}

.shape-wrap {
  position: absolute;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
}

.b-shape-1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 200px;
  margin: auto;
  text-align: center;
  animation: animationFramesOne 20s infinite linear;
}

.b-shape-2 {
  position: absolute;
  left: 140px;
  top: 45%;
  animation: animationFramesOne 20s infinite linear;
}

.b-shape-3 {
  position: absolute;
  left: 60px;
  top: 40%;
  animation: animationFramesThree 20s infinite linear;
}

.b-shape-4 {
  position: absolute;
  left: 60px;
  bottom: 80px;
  animation: animationFramesThree 20s infinite linear;
}

#login_container{position: relative}
.refresh-link{
  position: absolute;
  bottom:0px;
  right:45px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  display: flex;justify-content: center;
  align-items: center;
  background: rgba(255,255,255,.9);
}
</style>
